<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div id="info"></div>

    <script src="./lib/jquery.js"></script>
    <script src="./lib/template-web.js"></script>
    <!-- 模板的引入 -->
    <script id="tpl-user" type="text/html">
        <div>姓名：{{name}}</div>
        <div>年龄：{{age}}</div>
        {{if sex===1}}
        <div>性别：男</div>
        {{else if sex===2}}
        <div>性别：女</div>
        {{else}}
        <div>性别：不确定</div>
        {{/if}}
        <!-- <div>分数：{{store}}</div> -->
        <!-- 不会解析 -->
        <!-- 插值用法：如果插值显示时添加@ 那么浏览器会解析里面的内容 不加会显示原字符串-->
        <div>分数：{{@store}}</div>
    </script>
    <script>
        var userMsg = {
            name: '王五',
            age: 16,
            sex: 3,
            store: '<h1> 100 </h1>',
        };
        //template('模板id',数据)
        var html = template('tpl-user', userMsg);
        $('#info').html(html);
    </script>
</body>

</html>